//卡券展示
Vue.component('DkWxCouponShow', {
    props: {
        cid: {
            default: 5,
            type: [String, Number]
        },
        setting: {
            default: () => {},
            type: Object
        }
    },
    data() {
        return {
            item: {}
        }
    },
    mounted() {
        this.getCouponShow()
    },
    methods: {
        getCouponShow() {
            dk.post("/h5/coupon/getCouponShow", {cid: this.cid}).then(res => {
                if (res.code === 0) {
                    this.item = res.data
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        handleShowRule(rule) {
            this.$dialog.alert({
                messageAlign: "left",
                title: '使用规则',
                message: rule,
            })
        },
        openLocation(price) {
            wx.ready(function () {
                wx.openLocation({
                    latitude: price.latitude,
                    longitude: price.longitude,
                    name: price.name,
                    address: price.address,
                    scale: 10
                });
            });
        }
    },
    template: `<div class="coupon-show" v-if="item.id">
    <div class="coupon-content">
        <div class="show-head">
            <div class="coupon-type  z">
                <div class="c-icon" v-if="item.icon">
                    <img :src="item.icon" alt="" width="80" height="80">
                </div>
                <div class="c-txt" v-else>
                    <DkWxCouponPrice :setting="setting" :type="item.type" :discount="item.discount" :price="item.price"
                                     :typeName="item.type_name"></DkWxCouponPrice>
                </div>
            </div>
            <div class="show-name z">
                <p class="over over-line-2">{{item.name}}</p>
                <div class="c-time"><DkWxCouponTime :start-time="item.start_time" :end-time="item.end_time"></DkWxCouponTime></div>
                <div class="c-rule" @click="handleShowRule(item.rule)">使用规则></div>
            </div>
        </div>
        <div class="show-body">
            <div class="c-s-b-qrcode">
                <div class="qr-img"><img src="/assets/img/index/wechat/qr.jpg" width="150" height="150"></div>
                <p class="key">{{item.key}}</p>
            </div>
            <div class="place" v-if="item.place">
                <van-row>
                    <van-col span="4"><span>地点</span></van-col>
                    <van-col span="20">
                        <div class="over">{{item.place.name}}</div>
                    </van-col>
                </van-row>
                <van-row @click="openLocation(item.place)">
                    <van-col span="4"><span>地址</span></van-col>
                    <van-col span="20">
                        <div class="over">{{item.place.address}}</div>
                    </van-col>
                </van-row>
                <van-row v-if="item.place.phone">
                    <van-col span="4"><span>电话</span></van-col>
                    <van-col span="20"><a :href="'tel://'+item.place.phone" style="color: #999;line-height: 20px">{{item.place.phone}}</a>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</div>
    `
})
//卡券列表筛选
Vue.component('DkWxCoupon', {
    props: {
        styleColor: {
            default: '',
            type: String
        },
        tagTextColor: {
            default: '',
            type: String
        },
        tagBgColor: {
            default: '',
            type: String
        },
        radius: {
            default: '',
            type: [String, Number]
        }
    },
    data() {
        return {
            screenData: {
                type: 0,
                sort: 0
            },
            screenOption: {
                type: [
                    {text: '全部卡券', value: 0},
                    {text: '核销卡券', value: 1},
                    {text: '现金卡券', value: 2},
                    {text: '折扣卡券', value: 3},
                    {text: '过期卡券', value: -1},
                ],
                sort: [
                    {text: '最新领取', value: 0},
                    {text: '马上到期', value: 1},
                ]
            },
        }
    },
    mounted() {

    },
    methods: {},
    computed: {
        setting() {
            return {
                styleColor: this.styleColor,
                tagTextColor: this.tagTextColor,
                tagBgColor: this.tagBgColor,
                radius: this.radius
            }
        }
    },
    template: `
        <div class="dk-coupon">
            <div class="c-screen">
                <van-dropdown-menu>
                    <van-dropdown-item v-model="screenData.type" :options="screenOption.type"></van-dropdown-item>
                    <van-dropdown-item v-model="screenData.sort" :options="screenOption.sort"></van-dropdown-item>
                </van-dropdown-menu>
            </div>
            <div class="c-list">
                <DkWxCouponList :setting="setting" :screen-data="screenData" :class="{overTime:screenData.type===-1}"></DkWxCouponList>
            </div>
        </div>
    `
})
//卡券列表
Vue.component('DkWxCouponList', {
    props: {
        screenData: {
            default: {},
            type: Object
        },
        setting: {
            default: () => {},
            type: Object
        }
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            page: 1,
            size: 5,
            cid: 0,
            showCoupon: false
        }
    },
    watch: {
        screenData: {
            //深度监听
            handler: function (val, olVal) {
                this.onRefresh()
            },
            deep: true
        }
    },
    methods: {
        getList() {
            dk.post("/h5/coupon/getCouponList", {page: this.page, screenData: this.screenData}).then(res => {
                console.log(res)
                for (let i = 0; i < res.data.length; i++) {
                    const element = res.data[i];
                    this.list.push(element);
                }
                this.loading = false;
                this.refreshing = false;
                this.page++
                if (this.list.length >= res.msg || res.data.length === 0) {
                    this.finished = true;
                }
            })
        },
        onLoad() {
            this.getList()
        },
        onRefresh() {
            // 清空列表数据
            this.list = []
            this.page = 1
            this.finished = false;
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        handleShowRule(rule) {
            this.$dialog.alert({
                messageAlign: "left",
                title: '使用规则',
                message: rule,
            })
        },
        handleToUse(item) {
            if (item.type !== 1) {
                if (item.url) {
                    window.location.href = item.url
                }
            } else {
                this.cid = item.id
                this.showCoupon = true
            }
        }
    },
    template:`<div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul>
            <li v-for="(item,key) in list" :key="key" :style="{borderRadius:setting.radius?setting.radius+'px':'0px'}">
                <div class="coupon-body cl">
                    <div class="coupon-type  z">
                        <div class="c-icon" v-if="item.icon">
                            <img :src="item.icon" alt="" width="80" height="80">
                        </div>
                        <div class="c-txt" v-else>
                            <DkWxCouponPrice :setting="setting" :type="item.type" :discount="item.discount" :price="item.price"
                                             :typeName="item.type_name"></DkWxCouponPrice>
                        </div>
                    </div>
                    <div class="coupon-content z">
                        <div class="c-name over over-line-2">
                            <span v-if="item.tag" :style="{background:setting.tagBgColor,color:setting.tagTextColor}">{{item.tag}}</span>
                            <b>{{item.name}}</b>
                        </div>
                        <div class="c-time">
                            <DkWxCouponTime :start-time="item.start_time" :end-time="item.end_time"></DkWxCouponTime>
                        </div>
                        <div class="c-rule" @click="handleShowRule(item.rule)">使用规则></div>
                    </div>
                    <div class="coupon-btn y">
                        <van-button @click="handleToUse(item)" size="small" type="danger" block class="c-button"  :color="setting.styleColor">
                            去使用
                        </van-button>
                    </div>
                </div>
            </li>
        </ul>
    </van-list>
    <van-popup v-model="showCoupon" style="background:none;width: 80%" closeable get-container="body">
        <DkWxCouponShow :setting="setting" :cid="cid" :key="cid" style="padding: 10px;border-radius: 10px"></DkWxCouponShow>
    </van-popup>
</div>
    `
})
//卡券价格
Vue.component('DkWxCouponPrice', {
    props: {
        type: {
            default: 1,
            type: [String, Number]
        },
        discount: {
            default: '',
            type: String
        },
        price: {
            default: '',
            type: String
        },
        typeName: {
            default: '',
            type: String
        },
        setting: {
            default: () => {},
            type: Object
        }
    },
    template: `<div>
    <div class="c-price over" v-if="price && type != 3" :style="{color:setting.styleColor}">
        <em>￥</em><span>{{price}}</span>
    </div>
    <div class="c-price" v-if="discount && type != 2" :style="{color:setting.styleColor}">
        <span>{{discount}}</span><em>折</em>
    </div>
    <div class="c-type_name">{{typeName}}</div>
</div>
    `
})
//卡券时间
Vue.component('DkWxCouponTime', {
    props: {
        startTime: {
            default: '',
            type: [Number, String]
        },
        endTime: {
            default: '',
            type: [Number, String]
        }
    },
    data() {
        var timestamp = Date.parse(new Date()) / 1000;

        return {
            timestamp: timestamp
        }
    },
    computed: {
        row() {
            var state = 0;//-1已过期，0未开始，1可用,2快开始，3快过期
            var color = ""
            var timeStamp = 0
            var timeMsg = dk.date("Y/m/d", this.startTime) + ' 开始'
            if (this.timestamp > this.endTime) {
                state = -1
                timeMsg = '卡券已过期'
            }
            if ((this.timestamp > this.startTime && this.endTime > this.timestamp)) {
                state = 1
                timeMsg = dk.date("Y/m/d", this.endTime) + ' 到期'
            }
            if (this.startTimeStamp < 86400 && this.startTime > this.timestamp) {
                state = 2
                timeMsg = "后可用"
                timeStamp = this.startTimeStamp
                color = "#00c414"
            }
            if (this.endTimeStamp < 86400 && this.endTimeStamp > 0) {
                state = 3
                timeStamp = this.endTimeStamp
                timeMsg = "后失效"
                color = "#ff0000"
            }
            return {
                state,
                timeMsg,
                timeStamp,
                color
            };
        },
        startTimeStamp() {
            return this.startTime - this.timestamp
        },
        endTimeStamp() {
            return this.endTime - this.timestamp
        }
    },
    mounted() {

    },
    template: `<div>
    <div v-if="row.state <= 1">
        <span v-if="row.state === -1" style="color: #999">{{row.timeMsg}}</span>
        <span v-else>{{row.timeMsg}}</span>
    </div>
    <div v-if="row.state >= 2">
        <van-count-down
                millisecond
                :time="row.timeStamp*1000"
                :format="'HH:mm:ss'+row.timeMsg"
                style="display: inline-block;font-size: 12px;" :style="{color:row.color}">
        </van-count-down>
    </div>
</div>
    
    `
})